<template>
  <div class="wholesale-detail">
    <div class="block">
      <header>
        <h2>详情-{{ detailData.paymentStatus }}</h2>
      </header>
      <section style="display:flex;padding:0px 8px;">
        <div class="step-div">
          <p style="color:#EB8430;font-size:30px;">
            等待支付
          </p>
          <p style="color:#999999;font-size:18px;">
            <img src="@assets/img/time.png" alt />
            剩余：{{ timeOut }}
          </p>
          <p style="color:#000;font-size:24px">需付款：￥{{ detailData.orderAmount }}</p>

          <el-button v-show="isShowText" @click="toPay">
            去支付
          </el-button>
          <p v-show="!isShowText" style="font-size:16px;">
            已超时，请重新下单
          </p>
        </div>
        <div class="detail">
          <el-row :gutter="40" style="padding:16px;">
            <el-col :span="12">
              订单编号
              <span>{{ detailData.orderId ? detailData.orderId : '-' }}</span>
            </el-col>
            <el-col :span="12">
              下单时间
              <span>{{ detailData.orderDate ? detailData.orderDate : '-' }}</span>
            </el-col>
            <el-col :span="12">
              订单/供货单金额（元）
              <span>{{ detailData.orderAmount ? detailData.orderAmount : '-' }}</span>
            </el-col>
            <el-col :span="12">
              实付金额
              <span>{{ detailData.paymentPrice ? detailData.paymentPrice : '-' }}</span>
            </el-col>
            <el-col :span="12">
              支付用途
              <span>{{ detailData.payUse }}</span>
            </el-col>
            <el-col :span="12">
              业务类型
              <span>{{ detailData.busModel }}</span>
            </el-col>
          </el-row>
          <div class="hr" />
          <el-row :gutter="40" style="padding:16px;">
            <el-col :span="12">
              汇款单号
              <span>{{ detailData.remittanceOrderNo ? detailData.remittanceOrderNo : '-' }}</span>
            </el-col>
            <el-col :span="12">
              收款方
              <span>{{ detailData.payeeCompanyName ? detailData.payeeCompanyName : '-' }}</span>
            </el-col>
            <el-col :span="12">
              收款方银行名称
              <span>{{ detailData.payeeAccNoBank ? detailData.payeeAccNoBank : '-' }}</span>
            </el-col>
            <el-col :span="12">
              收款方银行账号
              <span>{{ detailData.payeeAccNo ? detailData.payeeAccNo : '-' }}</span>
            </el-col>
            <el-col :span="12">
              汇款时间
              <span>{{ detailData.paymentDate ? detailData.paymentDate : '-' }}</span>
            </el-col>
            <el-col :span="12">
              到账时间
              <span>{{ detailData.toAccountDate ? detailData.toAccountDate : '-' }}</span>
            </el-col>
            <!-- 缺少字段 -->
            <el-col :span="18">
              备注
              <span>{{ detailData.orderId ? detailData.orderId : '-' }}</span>
            </el-col>
          </el-row>
        </div>
      </section>
      <p v-if="detailData.isAccount === 2" class="daozhang">
        <img src="@assets/img/daozhangshibai.png" alt /> 到账失败原因：银行清算失败，支付金额原路返回
      </p>
      <p style="height:8px;" />
    </div>
    <div class="block">
      <header>
        <h2>产品详情</h2>
      </header>
      <section>
        <el-editable
          v-loading="tableLoading"
          stripe
          :columns="C0LUMNS"
          :data="payload.content"
          :payload="payload"
          :need-pagination="true"
          height="400"
          @reload="reloadPagination"
        />
      </section>
    </div>
    <el-dialog title="去支付" custom-class="dialog-custom" :visible.sync="toPayDialogVisible" width="50%">
      <div class="main">
        <p>支付金额</p>
        <p style="color:#333333;font-size:24px;">￥{{ detailData.orderAmount }}</p>
        <el-button size="mini" type="primary" @click="submitPay">
          去支付
        </el-button>
        <p>支持多银行在线支付</p>
      </div>
      <div class="footer">
        <p>系统将自动跳转至IE浏览器支付，请确保已安装IE浏览器和浏览器跳转控件。</p>
        <p style="padding: 5px 0 0 0;">
          若已安装，请忽略！
        </p>
        <p>
          若未安装，请提前安装再去支付！
          <el-button type="text" @click="dowload">
            点击下载控件
          </el-button>
        </p>
      </div>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>

<style lang="less" src="./index.less" scoped></style>
